<template>
    <div v-watermark="{ text: 'Your Watermark Text' }" class="content">
        <el-drawer
            v-model="drawer"
            :title="'队长同步操作【'+acountInfo.name+'】'"
            :direction="direction"
            :before-close="handleClose"
        >
            <el-tabs type="border-card" v-model="activeName" @tab-change="handleClick">
            <el-tab-pane name="1">
                    <template #label>
                        <span class="tab-label">开仓</span>
                    </template>
                    <div class="content">
                        <div class="content-item-top">
                            <el-tabs
                                v-model="activeName_sub_1"
                                class="demo-tabs-1"
                                @tab-change="handleClick"
                            >
                                <el-tab-pane label="市价" name="1">

                                    <!-- 可用余额 -->
                                    <p class="text">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="除去订单和仓位保证金后的余额"
                                            placement="top"
                                        >
                                            可用余额:
                                        </el-tooltip>
                                        &nbsp;<span>{{ account.available }}</span></p>
                                    <p class="text">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="开仓所需的初始保证金"
                                            placement="top"
                                        >
                                            仓位保证金:
                                        </el-tooltip>
                                        &nbsp;<span>{{ account.position_initial_margin }}</span></p>
                                    <!-- 输入开仓数量 -->
                                    <div class="order-item-size">
                                        <div class="label-text">
                                            <span class="label">合约数量:</span>
                                            <el-input-number v-model="creatOrderOperation.size" :min="0" :step="1" :max="100" @change="handleChange" />
                                        </div>
                                    </div>
                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">开仓价格:</p>
                                        </div>
                                        <div class="label-text-btn">
                                            市价
                                        </div>
                                    </div>
                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">
                                                <el-tooltip
                                                    class="box-item"
                                                    effect="dark"
                                                    content="市价单当前只支持 ioc 模式"
                                                    placement="top"
                                                >
                                                    策略选择:&nbsp;&nbsp;ioc
                                                </el-tooltip>
                                            </p>
                                        </div>
                                    </div>

                                    <div class="order-item-oprater">
                                        <div class="label-text">
                                            <p class="text">开仓操作:</p>
                                        </div>
                                        <div class="item">
                                            <div class="btn green" @click="openPosition()">
                                                <div class="center">开多</div>
                                                <div class="right">看涨</div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="btn red">
                                                <div class="center" @click="openPosition1()">开空</div>
                                                <div class="right">看跌</div>
                                            </div>
                                        </div>
                                    </div>

                                </el-tab-pane>
                                <el-tab-pane label="限价" name="2">

                                    <!-- 可用余额 -->
                                    <p class="text">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="除去订单和仓位保证金后的余额"
                                            placement="top"
                                        >
                                            可用余额:
                                        </el-tooltip>
                                        &nbsp;<span>{{ account.available }}</span></p>
                                    <p class="text">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="开仓所需的初始保证金"
                                            placement="top"
                                        >
                                            仓位保证金:
                                        </el-tooltip>
                                        &nbsp;<span>{{ account.position_initial_margin }}</span></p>
                                    <!-- 输入开仓数量 -->
                                    <div class="order-item-size">
                                        <div class="label-text">
                                            <span class="label">合约数量:</span>
                                            <el-input-number v-model="creatOrderOperation.size" :min="0" :step="1" :max="100" @change="handleChange" />
                                        </div>
                                    </div>

                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">开仓价格(限价):</p>
                                        </div>
                                        <el-input
                                                v-model="creatOrderOperation.price"
                                                size="large"
                                                style="text-align: center;"
                                                placeholder="请输入开仓价格"
                                                @input="handleChangeInput"
                                        >
                                        <template #prepend>价格(USDT)</template>
                                        </el-input>
                                    </div>
                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">开仓策略(限价):</p>
                                        </div>
                                        <el-select v-model="creatOrderOperation.tif" placeholder="请选择策略" size="large" style="width: 320px;">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                        </el-select>
                                    </div>

                                    <div class="order-item-oprater">
                                        <div class="label-text">
                                            <p class="text">开仓操作【限价】:</p>
                                        </div>
                                        <div class="item">
                                            <div class="btn green" @click="openPosition2()">
                                                <div class="center">开多【限价】</div>
                                                <div class="right">看涨</div>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <div class="btn red" @click="openPosition3()">
                                                <div class="center">开空【限价】</div>
                                                <div class="right">看跌</div>
                                            </div>
                                        </div>
                                    </div>

                                </el-tab-pane>
                                
                            </el-tabs>
                        </div>
                    </div>
            </el-tab-pane>
            <el-tab-pane name="2">
                    <template #label>
                        <span class="tab-label">平仓</span>
                    </template>
                    <div class="content">
                        <div class="content-item-top">
                            <el-tabs
                                v-model="activeName_sub_1"
                                class="demo-tabs-1"
                                @tab-change="handleClick"
                            >
                                <el-tab-pane label="市价" name="1">

                                    <!-- 可用余额 -->
                                    <p class="text">可用余额:&nbsp;<span>{{ account.available }}</span></p>
                                    <!-- 输入开仓数量 -->
                                    <div class="order-item-size">
                                        <div class="label-text">
                                            <span class="label">合约数量:</span>
                                            <el-input-number v-model="creatOrderOperation.size" :disabled="true" :min="0" :step="1" :max="100" @change="handleChange" />
                                        </div>
                                        
                                    </div>
                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">平仓价格:</p>
                                        </div>
                                        <div class="label-text-btn">
                                            市价
                                        </div>
                                    </div>

                                    <div class="order-item-oprater" v-if="!account.in_dual_mode">
                                        <div class="label-text">
                                            <p class="text">平仓操作(单仓模式)【市价】:</p>
                                        </div>
                                        <div class="item" @click="closePosition(1,'t-pingcang-shijia','market')">
                                            <div class="btn green">
                                                <div class="center">平仓</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-item-oprater" v-else>
                                        <div class="label-text">
                                            <p class="text">平仓操作(双仓模式):</p>
                                        </div>
                                        <div class="item" @click="closePosition1()">
                                            <div class="btn green">
                                                <div class="center">平多</div>
                                            </div>
                                        </div>
                                        <div class="item" @click="closePosition2()">
                                            <div class="btn red">
                                                <div class="center">平空</div>
                                            </div>
                                        </div>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="限价" name="2">

                                    <!-- 可用余额 -->
                                    <p class="text">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="除去订单和仓位保证金后的余额"
                                            placement="top"
                                        >
                                            可用余额:
                                        </el-tooltip>
                                        &nbsp;<span>{{ account.available }}</span></p>
                                    <p class="text">
                                        <el-tooltip
                                            class="box-item"
                                            effect="dark"
                                            content="开仓所需的初始保证金"
                                            placement="top"
                                        >
                                            仓位保证金:
                                        </el-tooltip>
                                        &nbsp;<span>{{ account.position_initial_margin }}</span></p>
                                    <!-- 输入开仓数量 -->
                                    <div class="order-item-size">
                                        <div class="label-text">
                                            <span class="label">合约数量:</span>
                                            <el-input-number :disabled="true" v-model="creatOrderOperation.size" :min="0" :step="1" :max="100" @change="handleChange" />
                                        </div>
                                    </div>

                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">平仓价格(限价):</p>
                                        </div>
                                        <el-input
                                                v-model="creatOrderOperation.price"
                                                size="large"
                                                style="text-align: center;"
                                                placeholder="请输入开仓价格"
                                                @input="handleChangeInput"
                                        >
                                        <template #prepend>价格(USDT)</template>
                                        </el-input>
                                    </div>
                                    <div class="order-item-price">
                                        <div class="label-text">
                                            <p class="text">平仓策略(限价):</p>
                                        </div>
                                        <el-select v-model="creatOrderOperation.tif" placeholder="请选择策略" size="large" style="width: 320px;">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        />
                                        </el-select>
                                    </div>

                                    <div class="order-item-oprater" v-if="!account.in_dual_mode">
                                        <div class="label-text">
                                            <p class="text">开仓操作(单仓模式)【限价】:</p>
                                        </div>
                                        <div class="item">
                                            <div class="btn green" @click="closePosition()">
                                                <div class="center">平仓</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="order-item-oprater" v-else>
                                        <div class="label-text">
                                            <p class="text">平仓操作(双仓模式):</p>
                                        </div>
                                        <div class="item" @click="closePosition1()">
                                            <div class="btn green">
                                                <div class="center">平多</div>
                                            </div>
                                        </div>
                                        <div class="item" @click="closePosition2()">
                                            <div class="btn red">
                                                <div class="center">平空</div>
                                            </div>
                                        </div>
                                    </div>

                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </div>
            </el-tab-pane>
            </el-tabs>
            <div class="order-info">
                <el-tabs v-model="activeName_sub_1_1" class="demo-tabs" @tab-change="handleClick">
                    <!-- <el-tab-pane label="当前委托(0)" name="1">User</el-tab-pane> -->
                    <el-tab-pane :label="'持有仓位('+PositionsInfo.length+')'" name="1">
                        <div class="infocard" v-for="(item, index) in PositionsInfo">
                            <div class="order">
                                <span>方向:</span>
                                <br>
                                <span>{{PositionsInfo[index].size>0?'开多':'开空' }}</span>
                            </div>
                            <div class="order">
                                <span>开仓价格:</span>
                                <br>
                                <span>{{ PositionsInfo[index].entry_price }}</span>
                            </div>
                            <div class="order">
                                <span>标记价格:</span>
                                <br>
                                <span v-if="symbol" style="color: #FC4100;">↑{{ tradeInfo.mark_price }}</span>
                                <span v-else style="color: #7ABA78;">↓{{ tradeInfo.mark_price }}</span>
                            </div>
                            <div class="order">
                                <span>数量:</span>
                                <br>
                                <span>{{ PositionsInfo[index].size }}</span>
                            </div>

                            <div class="order">
                                <div class="detail" >详情</div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="'交易记录('+trandHistory.length+')'" name="2">
                            <div class="infocard trandHistory">
                                <el-table :data="trandHistory" style="width: 100%">
                                    <el-table-column label="时间">
                                    <template #default="scope">
                                        <span>{{ convertToBeijingTime(scope.row.create_time) }}</span>
                                    </template>
                                    </el-table-column>
                                    <el-table-column label="方向">
                                        <template #default="scope">
                                            <span v-if="scope.row.text=='t-kaikong'" style="color: #FC4100;">开空【市价】</span>
                                            <span v-else-if="scope.row.text=='t-kaikong-xianjia'" style="color: #FC4100;">开空【限价】</span>
                                            <span v-else-if="scope.row.text=='t-kaiduo'" style="color: #FC4100;">开多【市价】</span>
                                            <span v-else-if="scope.row.text=='t-kaiduo-xianjia'" style="color: #FC4100;">开多【限价】</span>
                                            <span v-else-if="scope.row.text=='t-pingcang-shijia'" style="color: #FC4100;">平仓【市价】</span>
                                            <span v-else-if="scope.row.text=='t-pingduo-shijia'" style="color: #FC4100;">平多【市价】</span>
                                            <span v-else-if="scope.row.text=='t-pingkong-shijia'" style="color: #FC4100;">平空【市价】</span>
                                            <span v-else-if="scope.row.text=='t-pingcang-xianjia'" style="color: #FC4100;">平仓【限价】</span>
                                            <span v-else-if="scope.row.text=='t-pingduo-xianjia'" style="color: #FC4100;">平多【限价】</span>
                                            <span v-else-if="scope.row.text=='t-pingkong-xianjia'" style="color: #FC4100;">平空【限价】</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="交易价格">
                                        <template #default="scope">
                                            {{ parseFloat(scope.row.price).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="数量">
                                        <template #default="scope">
                                            {{ scope.row.size }}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                    </el-tab-pane>
                    <el-tab-pane :label="'未完成交易('+opentrandHistory.length+')'" name="3">
                            <div class="infocard trandHistory">
                                <el-table :data="opentrandHistory" style="width: 100%">
                                    <el-table-column label="时间">
                                    <template #default="scope" width="250px">
                                        <div style="display: flex; align-items: center">
                                        <span style="margin-left: 10px">{{ convertToBeijingTime(scope.row.create_time) }}</span>
                                        </div>
                                    </template>
                                    </el-table-column>
                                    <el-table-column label="方向">
                                        <template #default="scope">
                                            <span v-if="scope.row.text=='t-kaikong'" style="color: #FC4100;">开空【市价】</span>
                                            <span v-else-if="scope.row.text=='t-kaikong-xianjia'" style="color: #FC4100;">开空【限价】</span>
                                            <span v-else-if="scope.row.text=='t-kaiduo'" style="color: #FC4100;">开多【市价】</span>
                                            <span v-else-if="scope.row.text=='t-kaiduo-xianjia'" style="color: #FC4100;">开多【限价】</span>
                                            <span v-else-if="scope.row.text=='t-pingcang-shijia'" style="color: #FC4100;">平仓【市价】</span>
                                            <span v-else-if="scope.row.text=='t-pingduo-shijia'" style="color: #FC4100;">平多【市价】</span>
                                            <span v-else-if="scope.row.text=='t-pingkong-shijia'" style="color: #FC4100;">平空【市价】</span>
                                            <span v-else-if="scope.row.text=='t-pingcang-xianjia'" style="color: #FC4100;">平仓【限价】</span>
                                            <span v-else-if="scope.row.text=='t-pingduo-xianjia'" style="color: #FC4100;">平多【限价】</span>
                                            <span v-else-if="scope.row.text=='t-pingkong-xianjia'" style="color: #FC4100;">平空【限价】</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="交易价格">
                                        <template #default="scope">
                                            {{ parseFloat(scope.row.price).toFixed(2) }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="数量">
                                        <template #default="scope">
                                            {{ scope.row.size }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="170px">
                                        <template #default="scope">
                                            <el-button size="small" @click="handleEdit1(scope.row.id, scope.row)" :disabled="true">
                                                编辑
                                            </el-button>
                                            <el-button
                                                size="small"
                                                type="danger"
                                                @click="handleDeleteFn(scope.$index)"
                                            >
                                                取消
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <!-- 组件 -->
            <!-- <captainOprateConponent :account="account"/> -->
        </el-drawer>
    </div>
</template>

<script setup>
import { ref, defineProps, onMounted,watch,defineEmits ,defineExpose ,inject} from 'vue'
import { getAccountPositions,getFuturesAccountBalances,getTradeRecordsv2,getUnfinishedTradeRecordsv2,cancelOrder} from '../../../api/apis'
import { ElMessage } from 'element-plus'
import { captainOprate } from '@/store/captainOprate.js'

import captainOprateConponent from '@/components/captain/index.vue'

const activeName = ref('1')
const activeName_sub_1 = ref('1')
const activeName_sub_1_1 = ref('1')
const captainOption = captainOprate()


// 获取余额
function getAccountBalances(){
    const {gate_key,gate_secret} = props.acountInfo

    getFuturesAccountBalances({
        gate_key,
        gate_secret,
        settle:'usdt',
        contract:'',
    }).then(res=>{
        if (res.data.code==200) {
            account.value = res.data.data
            captainOption.updatedaccount(res.data.data)

        } else {
        ElMessage.error(`请求失败，错误代码：${res.data.code}，错误信息：${res.data.msg}`);
        }
    }).catch(error => {
        ElMessage.error('请求发生错误，请检查网络或稍后再试');
        console.error('获取账户列表时出现错误:', error);
    });
}


const handleDelete1 = (tab, event) => {
console.log(tab, event)
}


let trandHistory = ref([])

// 获取交易记录
function getTradeRecordsfn() {
    getTradeRecordsv2({
        gate_key : props.acountInfo.gate_key,
        gate_secret : props.acountInfo.gate_secret,
        settle: 'usdt',
        contract:'BTC_USDT',
        limit: 20,
        offset: 0,
    }).then(res => {
        if (res.data.code ==200) {
            trandHistory.value = res.data.data
        } else {
            ElMessage.error(res.data.message)
        }
    })
}
let opentrandHistory = ref([])
// 获取未完成交易记录
function getUnfinishedTradeRecordsfn() {
    getUnfinishedTradeRecordsv2({
        gate_key : props.acountInfo.gate_key,
        gate_secret : props.acountInfo.gate_secret,
        settle: 'usdt',
        contract:'BTC_USDT',
        status:'open',
        limit: 20,
        offset: 0,
    }).then(res => {
        if (res.data.code ==200) {
            opentrandHistory.value = res.data.data
        } else {
            ElMessage.error(res.data.message)
        }
    })
}

// 编辑当前未完成交易
function handleEdit(id,row) {
    console.log(id,row)
}



function convertToBeijingTime(timestamp) {
    // 将时间戳转换为毫秒
    const date = new Date(timestamp * 1000);

    // 获取中国东八区的时区偏移（以分钟为单位）
    const offset = date.getTimezoneOffset() * 60 * 1000; // 当前时区与UTC的时差，单位为毫秒
    const beijingOffset = -8 * 60 * 60 * 1000; // 北京时间与UTC的时差，单位为毫秒

    // 转换为北京时间
    const beijingTime = new Date(date.getTime() + offset + beijingOffset);

    return beijingTime.toISOString().replace('T', ' ').replace(/\.\d{3}Z$/, '');
}

const handleClick = (tab, event) => {

    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
    console.log(tab, event)
    changePosition()
    getInfo()
}
const tradeInfo = inject('tradeInfo');


const props = defineProps({
    acountInfo: {
        type: Object,
        default: () => {},
    },
    key: {
        type: Number,
        default: () => {},
    },
    mark_price: {
        type: String,
        default: false,
    },
    drawer: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    }
});


watch(() => props.key, (newValue, oldValue) => {
    getAccountPositionsfn()
    getAccountBalances()
    getTradeRecordsfn()
    getUnfinishedTradeRecordsfn()
})
const mark_price = ref(props.mark_price);
const symbol = ref(false); // true 代表涨，false 代表跌
const lastPrice = ref(null); // 存储上一次价格

watch(() => tradeInfo.value.mark_price, (newVal, oldVal) => {
    if (lastPrice.value !== null) { // 确保不是第一次赋值
        symbol.value = newVal > lastPrice.value; // 如果新值大于旧值，则为涨
    }
    lastPrice.value = newVal; // 更新上一次价格
}, { immediate: true });

// 获取仓位信息
const PositionsInfo = ref([])
function getAccountPositionsfn(){
    const {gate_key,gate_secret} = props.acountInfo
    getAccountPositions({
        gate_key,
        gate_secret,
        settle: 'usdt',
        holding:true,
        limit:100,
        offset:0
    }).then((res) => {
        const response = res.data
        if (response.code==200) {
            PositionsInfo.value = response.data
            } else {
            ElMessage.error(`请求失败，错误代码：${response.code}，错误信息：${response.msg}`);
            }
        })
        .catch((error) => {
            ElMessage.error('请求发生错误，请检查网络或稍后再试');
            console.error('获取账户列表时出现错误:', error);
        });
}


// 开仓操作
const creatOrderOperation = ref({
    size: 0,
    text: '',
    price: 0,
    tif: 'ioc',
})

// 开仓策略
const options = [
  {
    value: 'gtc',
    label: 'gtc-一直有效，直到取消',
  },
  {
    value: 'ioc',
    label: 'ioc-立即成交或者取消，只吃单不挂单',
  },
  {
    value: 'poc',
    label: 'poc-被动委托，只挂单不吃单',
  },
  {
    value: 'fok',
    label: 'fok-完全成交，或者完全取消',
  }
]
const emit = defineEmits(['sendParams','openPosition','openPosition1','openPosition2','openPosition3', 'closePosition','closePosition1','closePosition2','handleDeleteFn']);
function changePosition() {
    // 假设这些是请求参数
    let {size,price,tif} = creatOrderOperation.value
    const params = {
      settle: 'usdt',
      contract: 'BTC_USDT',
      size: size,
      price: price,
      tif: tif,
      activeName:activeName.value,
      activeName_sub_1:activeName_sub_1.value,
      activeName_sub_1_1:activeName_sub_1_1.value
    };

    if (activeName_sub_1.value==='2') {
        creatOrderOperation.value.tif='gtc'
    }

    console.log(params)
    // 将参数传递给父组件
    emit('sendParams', params);
}

function openPosition(){
  emit('openPosition',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function openPosition1(){
  emit('openPosition1',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function openPosition2(){
  emit('openPosition2',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function openPosition3(){
  emit('openPosition3',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function closePosition(){
  emit('closePosition',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function closePosition1(){
  emit('closePosition1',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function closePosition2(){
  emit('closePosition2',()=>{
    getInfo()
    creatOrderOperation.value = {
        size: 0,
        text: '',
        price: 0,
        tif: 'ioc',
    }
  });
}

function handleDeleteFn(index){
    emit('handleDeleteFn',index,()=>{
        getInfo()
        creatOrderOperation.value = {
            size: 0,
            text: '',
            price: 0,
            tif: 'ioc',
        }
    })
}


function getInfo(){
    getAccountPositionsfn()
    getAccountBalances()
    getTradeRecordsfn()
    getUnfinishedTradeRecordsfn()
}


// 获取账户余额
const account = ref({
    balance: 0
})


// 使用 defineExpose 公开函数
defineExpose({
    toggleDrawer
});





const handleChange = (value) => {

  changePosition()
}

const handleChangeInput = (value) => {

  // 防抖操作
  
  changePosition()
}

onMounted(() => {
    getAccountPositionsfn()
    getAccountBalances()
    getTradeRecordsfn()
    getUnfinishedTradeRecordsfn()
})



const drawer = ref(props.drawer)

// Function to toggle the drawer
function toggleDrawer() {
  drawer.value = !drawer.value;
}

function handleClose(done) {
  const params = {};
  // 将参数传递给父组件
  emit('sendParams', params);
  captainOption.updatedActive(false)
  drawer.value = false;
}

watch(() => props.drawer, (newVal) => {
  drawer.value = newVal;
})

watch(() => props.acountInfo, (newVal) => {
  getAccountPositionsfn()
  getAccountBalances()
  getTradeRecordsfn()
  getUnfinishedTradeRecordsfn()
})

watch(() => account.value.available, (newValue, oldValue) => {
    getInfo()
})


</script>

<style lang="scss">
/* styles */
.tab-label{
  width: 12.5vw;
}
.demo-tabs-1{
    .text{
        font-size: 14px;
        span{
            color: #5AB2FF;
        }
    }
    .order-item-size{
        width: 100%;
    }
    .label-text{
        font-size: 18px;
        .label{
            line-height: 30px;
            margin-right: 10px;
        }
    }
    .order-item-price{
        width: 100%;
        .label-text-btn{
            background-color: #fc819ea4;
            border-radius: 8px;
            margin: 10px auto;
            text-align: center;
            font-size: 18px;
            line-height: 40px;
            color: #ffffff;
        }

    }
    .order-item-oprater{
        width: 100%;
        .item{
            .btn{
                width: 100%;
                height: 40px;
                border-radius: 8px;
                text-align: center;
                line-height: 40px;
                color: #fff;
                position: relative;
                user-select: none;
                margin: 10px auto;
                font-weight: 400;
                cursor: pointer;
                .center{
                    font-size: 18px;
                }
                .right{
                    text-align: right;
                    font-size: 14px;
                    font-weight: 400;
                    color: #fff;
                    position: absolute;
                    right: 10px;
                    top: 0px;
                }
            }
            .btn:active{
                background-color: #75A47F;
            }
            .green{
                background-color: #B5C18E;
            }
            .red{
                background-color: #FA7070;
            }
        }
    }
}
.tab-label{
    font-size: 20px;
    font-weight: 600;
    width: 100px;
    text-align: center;
    

}
.order-info{
    width: 100%;
    height: fit-content;
    .infocard{
        width: 95%;
        overflow: hidden;
        height: 40px;
        background-color: #EEF7FF;
        margin-top: 10px;
        border-radius: 8px;
        padding: 10px;
        .order{
            line-height: 20px;
            font-size: 13px;
            width: fit-content;
            text-align: center;
            float: left;
            margin: 0 10px;
            span:nth-child(1){
                color: #5AB2FF;
                width: 100%;
            }
            .detail{
                width: 30px;
                line-height: 40px;
                font-weight: 600;
                font-size: 14px;
                cursor: pointer;
                user-select: none;
            }
            .detail:hover{
                color: #98ABEE;
            }
        }
    }
    .trandHistory{
        background-color: white;
        height: auto;
        padding: 0;
    }
}
</style>
